extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/progress/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Base'},
      'Progress'
    ],
  )

block view
  +docs-components('https://coreui.io/docs/components/progress/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Progress
          span.small.ms-1 Basic example
        .card-body
          p.text-body-secondary.small
            | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use 
            a(href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress')
              | the HTML5 
              code 
                = '<progress>'
              |  element
            | , ensuring you can stack progress bars, animate them, and place text labels over them.
          +example('https://coreui.io/docs/components/progress/#how-it-works')
            .progress
              .progress-bar(role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar(role='progressbar' style='width: 25%' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar(role='progressbar' style='width: 50%' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar(role='progressbar' style='width: 75%' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar(role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100')
          p.text-body-secondary.small
            | Bootstrap provides a handful of 
            a(href='https://coreui.io/docs/utilities/sizing/') utilities for setting width
            | . Depending on your needs, these may help with quickly configuring progress.
          +example('https://coreui.io/docs/components/progress/#how-it-works')
            .progress
              .progress-bar.w-75(role='progressbar' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
    .col-12
      .card.mb-4
        .card-header
          strong Progress
          span.small.ms-1 Labels
        .card-body
          p.text-body-secondary.small
            | Add labels to your progress bars by placing text within the 
            code .progress-bar
            | .
          +example('https://coreui.io/docs/components/progress/#labels')
            .progress
              .progress-bar(role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100') 25%
    .col-12
      .card.mb-4
        .card-header
          strong Progress
          span.small.ms-1 Height
        .card-body
          p.text-body-secondary.small
            | We only set a 
            code height
            |  value on the 
            code .progress
            | , so if you change that value the inner 
            code .progress-bar
            |  will automatically resize accordingly.
          +example('https://coreui.io/docs/components/progress/#height')
            .progress(style='height: 1px;')
              .progress-bar(role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
            .progress(style='height: 20px;')
              .progress-bar(role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
    .col-12
      .card.mb-4
        .card-header
          strong Progress
          span.small.ms-1 Backgrounds
        .card-body
          p.text-body-secondary.small
            | Use background utility classes to change the appearance of individual progress bars.
          +example('https://coreui.io/docs/components/progress/#backgrounds')
            .progress
              .progress-bar.bg-success(role='progressbar' style='width: 25%' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar.bg-info(role='progressbar' style='width: 50%' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar.bg-warning(role='progressbar' style='width: 75%' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar.bg-danger(role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100')
    .col-12
      .card.mb-4
        .card-header
          strong Progress
          span.small.ms-1 Multiple bars
        .card-body
          p Include multiple progress bars in a progress component if you need.
          +example('https://coreui.io/docs/components/progress/#multiple-bars')
            .progress
              .progress-bar(role='progressbar' style='width: 15%' aria-valuenow='15' aria-valuemin='0' aria-valuemax='100')
              .progress-bar.bg-success(role='progressbar' style='width: 30%' aria-valuenow='30' aria-valuemin='0' aria-valuemax='100')
              .progress-bar.bg-info(role='progressbar' style='width: 20%' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100')
    .col-12
      .card.mb-4
        .card-header
          strong Progress
          span.small.ms-1 Striped
        .card-body
          p.text-body-secondary.small
            | Add 
            code .progress-bar-striped
            |  to any 
            code .progress-bar
            |  to apply a stripe via CSS gradient over the progress bar’s background color.
          +example('https://coreui.io/docs/components/progress/#striped')
            .progress
              .progress-bar.progress-bar-striped(role='progressbar' style='width: 10%' aria-valuenow='10' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar.progress-bar-striped.bg-success(role='progressbar' style='width: 25%' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar.progress-bar-striped.bg-info(role='progressbar' style='width: 50%' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar.progress-bar-striped.bg-warning(role='progressbar' style='width: 75%' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
            .progress
              .progress-bar.progress-bar-striped.bg-danger(role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100')
    .col-12
      .card.mb-4
        .card-header
          strong Progress
          span.small.ms-1 Animated stripes
        .card-body
          p.text-body-secondary.small
            | The striped gradient can also be animated. Add 
            code .progress-bar-animated
            |  to 
            code .progress-bar
            |  to animate the stripes right to left via CSS3 animations.
          +example('https://coreui.io/docs/components/progress/#animated-stripes')
            .progress
              .progress-bar.progress-bar-striped(role='progressbar' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100' style='width: 75%')
            button#btnToggleAnimatedProgress.btn.btn-secondary.mt-3(type='button' data-coreui-toggle='button' aria-pressed='false' autocomplete='off')
              | Toggle animation
